<template>
	<view>
		<uni-section title="活动内容" type="line">
			<view class="activityInfo-box">
				<text class="content">{{activityInfo.activityContent}}</text>
			</view>
		</uni-section>

		<uni-section title="活动日期" type="line">
			<view class="activityInfo-box">
				<text class="content">{{activityInfo.startTime}} — {{activityInfo.endTime}}</text>
			</view>

		</uni-section>

		<uni-section title="支持门店" type="line">
			<view class="activityInfo-box">
				<view class="storeItem" v-for="(item, index) in activityInfo.activityUnits" :key="index">
					<text class="name">{{item.applicableUnit}}</text>
					<text class="address">地址：{{item.unitAddress}}</text>
				</view>
			</view>
		</uni-section>

		<uni-section title="支持业务" type="line">
			<view class="activityInfo-box">
				<view class="business">
					<view class="type">{{activityInfo.bizType|businessType}}</view>
					<view class="status">
						活动状态:
						<text>{{activityInfo.activityStatus|activityStatus}}</text>
					</view>
				</view>
			</view>
		</uni-section>


		<!-- <view class="bigBtn" @click="generatePoter"> -->
			<!-- 生成高清海报分享 -->
			<!-- <image class="tag" src="../../static/other/tag_tj.png" mode=""></image> -->
		<!-- </view> -->
		<!-- 	<view class="otherBox">
			<button class="smallBtn">直接分享给好友</button>
			<button class="smallBtn" plain="true">直接发送朋友圈</button>
		</view> -->

		<view style="height: 20rpx;">

		</view>

		<poster :showPop="showPoter" @close="showPoter=false" :activityInfo="activityInfo"></poster>
		<canvas class="f__canvas"
			style="width:650px;height:812px;position: absolute;top: -812px;z-index: -1000;zoom: 2%;" v-show="!canvasImg"
			canvas-id="firstCanvas" id="firstCanvas"></canvas>
	</view>
</template>

<script>
	import poster from '@/components/poster/poster.vue'
	import * as api from '@/api/activity.js';
	import settings from '@/settings.js'
	import _canvas from '@/uni_modules/fan-canvas/canvasUtils';
	import {
		saveImg,
		qrcodeCanvas
	} from '@/uni_modules/fan-canvas/plugins/utils';
	export default {
		components: {
			poster
		},
		data() {
			return {
				storeList: ['1', '2'],
				activityInfo: {},
				showPoter: false,
				canvasImg: null
			}
		},
		onLoad(option) {
			const activityId = option.activityId;
			api.shareDetails(activityId).then(res => {
				this.activityInfo = res.data;
			})
		},
		methods: {
			generatePoter() {
				var url = "";
				switch (this.activityInfo.templateCode) {
					case 'YHQ-001': //优惠券模板
						url = 'pagesB/activity/template/coupon'
						break;
					case 'CX-001': //车型模板
						url = 'pagesB/activity/template/car'
						break;
					case 'ZQ-CX-001': //中秋节车型模板
						url = 'pagesB/activity/template/zhongqiu-car'
						break;
					case 'ZQ-SQ-001': //中秋节优惠券模板
						url = 'pagesB/activity/template/zhongqiu-coupon'
						break;
					default:
						break;
				}
				console.log(url);
				api.getQrcode({
					activityId: this.activityInfo.activityId,
					url: url
				}).then(res => {
					this.activityInfo.qrcodeImg = settings.baseImageUrl + res.data;
					this.createGoodsPoster();
				})
				// this.showPoter = true;
			},
			//绘制海报
			async createGoodsPoster() {
				var that = this;
				uni.showLoading({
					title: '海报生成中'
				});
				try {
					const cvsW = 650;
					const cvsH = 810;
					const goodsH = 570;
					const logo_w = 100;
					const margin = 30;
					let family =
						" 'PingFang SC',tahoma,arial,'helvetica neue','hiragino sans gb','microsoft yahei',sans-serif";
					let ctx = uni.createCanvasContext('firstCanvas');
					// 绘制矩形
					_canvas.fillRoundRect(ctx, 0, 0, cvsW, cvsH, 20, "#ffffff");
					// 同步加载图片
					var logo = await _canvas.getImageInfo(settings.baseImageUrl + that.activityInfo.coverPictures);
					if (logo.path) {
						// save+clip+restore:防止图片超出边框显示--相当于overflow: hidden;
						ctx.save();
						ctx.clip(); //剪切--不允许超出矩形框
						// 绘制商品图片
						_canvas.drawImgCover(ctx, logo, 0, 0, cvsW, goodsH);
						ctx.restore();





						// 简介-多行文字
						ctx.setFillStyle('#333333')
						ctx.textAlign = 'left';
						var options = {
							font: "normal 28px" + family, //设置字体
							ctx: ctx,
							word: that.activityInfo.activityName, //文本
							maxWidth: 310, //最大宽度
							maxLine: 2, //最大行数--超出省略
							x: 40, //x坐标
							y: 680, //y坐标
							l_h: 40 //行高
						}
						// 文本自定义换行
						_canvas.dealWords(options)

						// 绘制二维码
						var qrcodeImg = await _canvas.getImageInfo(that.activityInfo.qrcodeImg);
						ctx.drawImage(qrcodeImg.path, 410, 605, 180, 180);
						// 绘制图片
						ctx.draw(false, function() {
							uni.canvasToTempFilePath({
								width: cvsW,
								height: cvsH,
								canvasId: 'firstCanvas',
								success(res) {
									uni.hideLoading();
									that.activityInfo.canvasImg = res.tempFilePath
									that.canvasImg = res.tempFilePath
									that.showPoter = true
								}
							}, that)
						}, 500)
					} else {
						uni.hideLoading();
						uni.showToast({
							title: '海报制作失败',
							icon: 'none'
						});
					}
				} catch (e) {
					uni.hideLoading();
					uni.showToast({
						title: '海报制作失败',
						icon: 'none'
					});
				}


			},
		}
	}
</script>

<style lang="scss" scoped>
	.activityInfo-box {
		margin: 0 68rpx;
		padding-bottom: 20rpx;
	}

	.content {
		font-size: 26rpx;
		font-weight: bold;
		text-align: left;
		color: #666666;
	}

	.storeItem {
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;

		.name {
			color: #333;
			font-size: 26rpx;
		}

		.address {
			margin-top: 15rpx;
			color: #999;
			font-size: 26rpx;
		}
	}

	.business {
		.type {
			color: #999;
			font-size: 26rpx;
		}

		.status {
			margin-top: 15rpx;
			color: #999;
			font-size: 26rpx;

			text {
				color: #333;
				font-size: 26rpx;
			}
		}
	}

	.bigBtn {
		background: #3c87f5;
		border-radius: 4rpx;
		margin: 50rpx 60rpx 25rpx;
		color: #fff;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		position: relative;

		.tag {
			position: absolute;
			left: 0;
			top: 0;
			width: 99rpx;
			height: 72rpx;
		}
	}

	.otherBox {
		margin: 10rpx 60rpx;
		display: flex;
		justify-content: space-between;
		padding-bottom: 40rpx;

		.smallBtn {
			width: 303rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			color: #3c87f5;
			font-size: 28rpx;
			font-weight: bold;
			border: 1rpx solid #3c87f5;
			border-radius: 4rpx;
		}
	}
</style>
